<template>
    <div class="user">
        <div class="user-banner">
            <!-- 头像 -->
            <div class="avatar"><el-avatar :size="125" :src="circleUrl"></el-avatar></div>
            <div class="user-banner-right">
                <h1>{{ name }}</h1>
                <h2>{{ countAll }} 题</h2>
                <el-button round @click="handleClickInfo">编辑个人资料</el-button>
            </div>
        </div>

        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="做题情况" name="first">做题情况</el-tab-pane>
            <el-tab-pane label="做题分析" name="second">做题分析</el-tab-pane>
            <el-tab-pane label="难点回顾" name="third">难点回顾</el-tab-pane>
            <el-tab-pane label="收藏题目" name="fourth">收藏题目</el-tab-pane>
            <el-tab-pane label="历史记录" name="fifth">历史记录</el-tab-pane>
            <el-tab-pane label="查看帮助" name="sixth">查看帮助</el-tab-pane>
        </el-tabs>



        <div class="user-content">
            <router-view />
        </div>
    </div>
</template>

<script>
import { getUserInfo } from '@/api/user'
import { getStatistics } from '@/api/statistics';

export default {
    data() {
        return {
            name: "",
            countAll: null,
            circleUrl: "",
            activeName: 'first'
        };
    },
    mounted() {
        const currentPath = this.$route.path;
        if (currentPath === '/main/user/statistics') {
            this.activeName = 'first';
        }
        else if (currentPath === '/main/user/evaluation') {
            this.activeName = 'second';
        }
        else if (currentPath === '/main/user/difficulty') {
            this.activeName = 'third';
        } 
        else if (currentPath === '/main/user/collection') {
            this.activeName = 'fourth';
        } 
        else if (currentPath === '/main/user/record') {
            this.activeName = 'fifth';
        } 
        else if (currentPath === '/main/user/help') {
            this.activeName = 'sixth';
        } 
        else {
            // 默认情况下的 activeIndex 值
            this.activeName = 'first';
        }
        getUserInfo().then((res) => {
            this.name = res.data.username;
            // console.log(res.data)
        });
        getStatistics().then((res) => {
            this.countAll = res.data.total;
        })
    },

    methods: {
        handleClick(tab, event) {
            if (tab.name === 'first') {
                this.$router.push('/main/user/statistics');
            }
            if (tab.name === 'second') {
                this.$router.push('/main/user/evaluation');
            }
            if (tab.name === 'third') {
                this.$router.push('/main/user/difficulty');
            }
            if (tab.name === 'fourth') {
                this.$router.push('/main/user/collection');
            }
            if (tab.name === 'fifth') {
                this.$router.push('/main/user/record');
            }
            if (tab.name === 'sixth') {
                this.$router.push('/main/user/help');
            }
        },
        handleClickInfo() {
            this.$router.push('/main/personal/info');
        }
    }
}
</script>

<style lang="scss">
.user {
    background-color: #FFF7EF;

    .user-banner {
        display: flex;
        padding-top: 20px;
        justify-content: center;
        margin-left: 265px;
        padding-bottom: 40px;

        .el-avatar {
            border: 3px solid #FF9000;
        }

        .user-banner-right {
            margin-left: 20px;
            text-align: left;
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            h1 {
                font-size: 30px;
                color: #D26B00;
                margin-top: 10px;
            }

            h2 {
                font-size: 20px;
                color: #D26B00;
                font-weight: 400;
            }

            //button
            .el-button.is-round {
                padding: 6px 23px;
            }

            .el-button {
                background-color: transparent;
                border: 1px solid #FFCDA9;
                color: #D26B00;
                font-size: 12px;
            }

            .el-button:hover {
                background-color: #ff9000;
                color: #633E1C
            }
        }
    }

    .el-tabs {
        width: 1200px;
        margin: 0 auto;
    }

    .el-tabs__item {
        color: #9A6F4A;
    }

    .el-tabs__item:hover {
        color: #BAA89B;
    }

    .el-tabs__nav-wrap::after {
        color: #ede9e4;
    }

    .el-tabs__active-bar {
        background-color: #9A6F4A;
    }

    .el-tabs__item.is-active {
        color: #9A6F4A;
        font-weight: 700;
    }

    .el-tab-pane {
        visibility: hidden;
    }


}
</style>